<template>
  <el-row class="response-el-row">
    <el-form ref="workRuleForm" :class="{ '': formDataIsValid }" :validate-on-rule-change="false" :rules="rules" :model="workInfo" class="lineHeight32" label-width="95px" label-position="left">
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="作品封面" prop="workCover" class="surface-plot-upload">
          <surface-plot-upload :cover="workInfo.workCover" @update:cover="coverUploadSuccess" />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="stickerId" prop="stickerId">
          <el-input
            :value="workInfo.stickerId"
            placeholder="请输入stickerId"
            name="stickerId"
            type="text"
            maxlength="50"
            @input="textInputChange($event, 'stickerId')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="作品名称" prop="workName">
          <el-input
            :value="workInfo.workName"
            :maxlength="20"
            placeholder="请输入作品名称"
            name="name"
            type="text"
            @input="textInputChange($event, 'workName')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="总下载量" prop="downloadNum">
          <el-input
            :value="workInfo.downloadNum"
            placeholder=""
            name="downloadNum"
            maxlength="18"
            type="text"
            @input="numInputChange($event, 'downloadNum')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="上架时间" prop="publishTime">
          <el-date-picker
            v-model="publishTime"
            :picker-options="pickerOption"
            :editable="false"
            type="date"
            placeholder="选择日期"
            value-format="timestamp"
            format="yyyy/MM/dd"
            @change="publishTimeChange($event, 'publishTime')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="总发送量" prop="sendNum">
          <el-input
            :value="workInfo.sendNum"
            placeholder=""
            name="sendNum"
            maxlength="18"
            type="text"
            @input="numInputChange($event, 'sendNum')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="表情包效果" prop="effect">
          <el-select :value="workInfo.effect" popper-class="global-select-down" name="effect" @change="selectChange($event, 'effect')">
            <el-option label="请选择" value="" />
            <el-option
              v-for="item in mengliEmojiEffect"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
        <el-form-item label="总赞赏金额(元)" prop="rewardPrice">
          <el-input
            :value="workInfo.rewardPrice"
            placeholder=""
            name="rewardPrice"
            maxlength="18"
            type="text"
            @input="amountInputChange($event, 'rewardPrice')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="表情包类型" prop="type">
          <el-select :value="workInfo.type" popper-class="global-select-down" name="type" @change="selectChange($event, 'type')">
            <el-option label="请选择" value="" />
            <el-option
              v-for="item in mengliEmojiType"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="responsive-col-lg-8">
        <el-form-item label="总赞赏次数" prop="rewardNum">
          <el-input
            :value="workInfo.rewardNum"
            placeholder=""
            name="rewardNum"
            maxlength="18"
            type="text"
            @input="numInputChange($event, 'rewardNum')"
          />
        </el-form-item>
      </el-col>
    </el-form>
  </el-row >
</template>
<script>
import SurfacePlotUpload from '@/components/Mengli/surfacePlotUpload.vue';
import { mengliEmojiEffect, mengliEmojiType } from '@/utils/typeCfg';
export default {
  name: 'WorkInfoEdit',
  components: {
    SurfacePlotUpload
  },
  props: {
    workInfo: {
      type: Object,
      default: () => {
        return {
          workName: '',
          stickerId: '',
          downloadNum: '',
          publishTime: '',
          sendNum: '',
          effect: '',
          rewardPrice: '',
          type: '',
          rewardNum: ''
        };
      }
    }
  },
  data() {
    return {
      pickerOption: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      mengliEmojiEffect,
      mengliEmojiType,
      publishTime: '',
      rules: {
        'workName': [
          { required: true, message: '请输入作品名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }
        ],
        'workCover': [
          { required: true, message: '请上传作品图片', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    formDataIsValid() {
      const { workInfo: { workName }} = this;
      let isValid = true;
      if (this.$refs.workRuleForm) {
        const { fields } = this.$refs.workRuleForm;
        isValid = !fields.some(item => item.validateState === 'error');
      }
      const result = !!(workName && isValid);
      this.$emit('update:formValid', result);
      return result;
    }
  },
  watch: {
    workInfo(newValue, oldValue) {
      // if (!this.publishTime) {
      // console.log('getnewValue');
      this.publishTime = newValue.publishTime;
      // }
    }
  },
  created() {
    // this.publishTime = this.workInfo.publishTime;
  },
  methods: {
    // 用于手动触发表单验证
    triggerFormValidate() {
      this.$refs.workRuleForm.validate();
    },
    // 输入框只允许输入数字表单逻辑
    numInputChange(text, prop) {
      const str = text.replace(/[^\d]/g, ''); // 只允许数字
      const workInfo = { ...this.workInfo };
      workInfo[prop] = str;
      this.$emit('update:workInfo', workInfo);
    },
    amountInputChange(text, prop) {
      let str = text.replace(/[^\d.]/g, ''); // 只允许数字
      str = str.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
      str = str.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
      str = str.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
      str = str.replace(/^0[^\.]+/g, '0'); // 连续多个0 replace为1个0
      str = str.replace(/^(\d+)\.(\d\d).*$/, '$1.$2'); // 只允许保留小数点后3位
      const workInfo = { ...this.workInfo };
      workInfo[prop] = str;
      this.$emit('update:workInfo', workInfo);
    },
    textInputChange(text, prop) {
      const workInfo = { ...this.workInfo };
      workInfo[prop] = text;
      this.$emit('update:workInfo', workInfo);
    },
    selectChange(type, prop) {
      const workInfo = { ...this.workInfo };
      workInfo[prop] = type;
      this.$emit('update:workInfo', workInfo);
    },
    publishTimeChange(date, prop) {
      const workInfo = { ...this.workInfo };
      workInfo[prop] = date;
      this.$emit('update:workInfo', workInfo);
    },
    // 图片上传成功
    coverUploadSuccess(url) {
      const workInfo = { ...this.workInfo };
      workInfo.workCover = url;
      this.$emit('update:workInfo', workInfo);
    },
    cleanField() {
      this.$refs.workRuleForm.resetField();
    }
  }
};
</script>

<style lang="scss" scoped>
.indentation-form-item {
  ::v-deep .el-form-item {
    label {
      line-height: 1.2 !important;
    }
  }
}
</style>
